<%@ include file="/common/taglibs.jsp"%>
<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8"
	contentType="text/html;charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>

		<title></title>
		<link rel="shortcut icon" href="http://pic2.58.com/back/favicon.ico" />
		<link href="<c:url value='/styles/post.css' />" type="text/css"
			rel="stylesheet" />
		<style type="text/css">
`
* {
	padding: 0;
	margin: 0;
}

.blank {
	clear: both;
}

#uploader .swfupload {
	float: left;
}

#uploader .red {
	color: #f00;
	padding: 0;
}

.imgbox {
	float: left;
	text-align: center;
	margin: 0 5px 5px 0;
	width: 88px;
	height: 110px;
	font-size: 12px;
	position: relative;
}

.item_border {
	height: 66px;
	width: 86px;
	border: 1px solid #7F9DB9;
}

.thumb_actv {
	border-color: #aaa;
}

.item {
	position: relative;
	margin: 3px;
	height: 60px;
	width: 80px;
}

.item .number {
	top: 24px;
	left: 0;
	width: 62px;
	border: 0;
	position: absolute;
	text-align: center;
	font-size: 12px;
	color: gray;
}

.ui-progressbar-value {
	top: 58px;
	left: 0;
	height: 3px;
	overflow: hidden;
	position: absolute;
	background: red;
}

.previous {
	background: url("http://pic2.58.com/n/images/post/pre-next-delete.gif")
		no-repeat scroll 0 -7px transparent;
	display: inline-block;
	height: 12px;
	line-height: 100px;
	margin: 7px 33px 0 2px;
	overflow: hidden;
	vertical-align: middle;
	width: 13px;
}

.previous:hover {
	background: url("http://pic2.58.com/n/images/post/pre-next-delete.gif")
		no-repeat scroll 0 -19px transparent;
}

.front-cover {
	bottom: 5px;
	color: #666;
	left: 30px;
	position: absolute;
	top: 5px;
	left: 34px;
}

.next {
	background: url("http://pic2.58.com/n/images/post/pre-next-delete.gif")
		no-repeat scroll -14px -7px transparent;
	display: inline-block;
	height: 12px;
	line-height: 100px;
	margin: 7px 0 0;
	overflow: hidden;
	vertical-align: middle;
	width: 13px;
}

.next:hover {
	background: url("http://pic2.58.com/n/images/post/pre-next-delete.gif")
		no-repeat scroll -14px -19px transparent;
}

.buts {
	height: 30px;
	background: #eee;
	position: relative;
}

.delete {
	background: url("http://pic2.58.com/n/images/post/closeyes.gif")
		no-repeat scroll 0 0 transparent;
	display: block;
	height: 12px;
	line-height: 100px;
	overflow: hidden;
	position: absolute;
	right: 3px;
	top: 3px;
	width: 13px;
	z-index: 999;
}

.delete:hover {
	background: url("http://pic2.58.com/n/images/post/close-hover.gif")
		no-repeat scroll 0 0 transparent;
}

.changeVersion {
	clear: both;
	padding-top: 3px;
}

.changeVersion a {
	font: 14px/ 26px '';
}

.buttonZone {
	position: relative;
	height: 27px;
}

.buttonZone #id_status {
	position: absolute;
	font: 12px/ 22px '';
	left: 107px;
	top: 0;
}

#uploadimages:after {
	content: '.';
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#uploadimages { *
	zone: 1;
}

.compressoring {
	background: url(http://pic2.58.com/n/images/post/05043120.gif) no-repeat
		center center;
}

.compressoring .number {
	top: 44px;
	left: 10px;
}

#flashInfo {
	padding: 2px 5px;
	position: absolute;
	border: 1px solid #eee;
	display: none;
	font: 12px/ 22px '';
	color: #333;
	background: #ffb5d5;
}
</style>
	</head>
	<body>

		<div id="header">

			<a href="http://www.58.com/" id="logo" target="_blank"><img
					src="http://pic2.58.com/ui6/post/logo.gif" title="58同城"
					alt="58.com" /> </a>

			<div class="bar_city">
				<h2>
					北京
				</h2>
			</div>

			<div class="post_login">

				<div id="login">
					<a target="_self"
						href="http://passport.58.com/login/?path=http%3A//post.58.com/">登录</a><span
						class="gap">|</span><a target="_self"
						href="http://passport.58.com/reg/?city=post">注册</a>
				</div>

			</div>

		</div>



		<div class="flow_step_no5">
			<!-- s -->
			<div class="flow_step">
				<ol class="cols5">
					<li class="step_1">
						<div>
							<i>1</i><a href='/1'>宠物</a><span></span>
						</div>
						<em class="f1"></em>
					</li>
					<li class="step_2">
						<div>
							<i>2</i><a href='/1/832/s2'>花鸟鱼虫</a><span></span>
						</div>
					</li>
					<li class="step_3">
						<div>
							<i>3</i><a href='/1/19/s3'>全北京</a><span></span>
						</div>
					</li>
					<li class="step_4">
						<div>
							<i>4</i>选择商圈
							<span></span>
						</div>
					</li>
					<li class="step_5">
						<div>
							<i>5</i>填写信息
							<span></span>
						</div>
						<em class="f2"></em>
					</li>
				</ol>
			</div>
			<!-- e -->
		</div>



		<div class="minheightout w">



			<div class="c"></div>



			<div class="content">
				<div id="toperro" class="hc"></div>
				<div>
					<p class="ts1">
						<span class="ietishi">无法发布？<a
							href="http://about.58.com/28.html#q" target="_blank">查看帮助</a> </span>&nbsp;亲爱的
						<b> </b>
					</p>
				</div>
				<div id="topinfomsg">
					1、“宠物服务”信息请发布到“
					<u><a href="http://post.58.com/t/114" target="_blank">宠物店/服务</a>
					</u>”类别，本类别禁止发布宠物服务一类的信息。
					<br />
					2、信息里须
					<b>注明宠物的价格</b>，否则信息会被删除。
					<br />
					3、联系方式中填写虚假电话，信息将会被删除，严重者冻结账户。
				</div>
				<form name="aspnetForm" method="post"
					action="<c:url value='saveInfo' />" id="info_form">
					<input type="hidden" name="info.id" value='${info.id}' />

					<table cellpadding="0" cellspacing="0" class="box1" id="formTb">
						<tr>
							<td class="t">
								<b class="red">*</b> 供 求：
							</td>
							<td class="checkpb">
								<label>
									<input type="radio" name="info.sellFlag" value='true'
										<c:if test="${info.sellFlag}">checked </c:if> />
									<span>转让</span>
								</label>
								&nbsp;&nbsp;&nbsp;&nbsp;
								<label>
									<input type="radio" name="info.sellFlag" value='false'
										<c:if test="${!info.sellFlag}">checked </c:if> />
									<span>求购</span>
								</label>
								&nbsp;&nbsp;&nbsp;&nbsp;
								<span id="type_Tip"></span>
							</td>
						</tr>
						<tr>
							<td class="t">
								<b class="red">*</b> 标 题：
							</td>
							<td>
								<input type="text" name="info.title" value='${info.title}'
									id="info.title" class="text1" />
							</td>
						</tr>
						<tr>
							<td class="t">
								<b class="red">*</b> 类 型：
							</td>
							<td>
								<select onchange="getSubCats(this) ;">
									<option value="-1">
										aa
									</option>
									<c:forEach items="${cats}" var="cat">
										<option value='${cat.id}'>
											${cat.catName }
										</option>
									</c:forEach>
								</select>

								<select name="info.typeId" id="info_typeId">
									<c:forEach items="${cats}" var="cat">
										<option value='${cat.id}'>
											${cat.catName }
										</option>
									</c:forEach>
								</select>


								&nbsp;&nbsp;
								<b class="red">*</b> 价 格：
								<input class="text3 gray" type="text" id="info.money"
									name="info.money" value='${info.money }' />
								元
								<span id="ObjectType_Tip"></span>
							</td>
						</tr>
						<tr id="tt" style="display: none">
							<td class="t">
								选择标签：
							</td>
							<td>
								<ul class="tag3" id="tagul">
									<li>
										<input name="Tag" id="Tag_0" type="checkbox" value="102" />
										盆景
									</li>
								</ul>
								<span id="infotag_Tip"></span>
							</td>
						</tr>
						<tr>
							<td class="t">
								区域地段：
							</td>
							<td>
								<select id="localArea" name="info.provinceId">
									<c:forEach items="${areas}" var="area">
										<option value='${area.id}'>
											${area.name }
										</option>
									</c:forEach>

								</select>
								&nbsp;
								<input type="hidden" name="info.cityId" value="0" />

							</td>
						</tr>
						<tr>
							<td class="t">
								<b class="red">*</b> 内容：
							</td>
							<td>

								<textarea class="jquery_ckeditor" cols="80" id="editor1"
									name="info.content">${info.content }</textarea>

							</td>
						</tr>
						<tr>
							<td class="t">
								<b class="red">*</b> 上传图片：
							</td>
							<td>
								 
								<span id="spanButtonPlaceholder1"></span> &nbsp;	&nbsp;&nbsp;&nbsp;&nbsp;			<span id="selected_pic"></span>

							</td>
						</tr>
						<tr>
							<td class="t">
								&nbsp;
							</td>
							<td>
								<div id="uploader">
									<div id="uploadimages">
									<c:forEach items="${infoImages}" var="img">
										<div id="img_${img.id}" class="imgbox">
											<div class="item_border">
												<div class="item uploaded">
													<img width="80" height="60" src="${img.source}" />
												</div>
												<a href="javascript:void(0)" onclick="delImg(this,${img.id})" 	class="cancel delete">删除</a>
											</div>
										</div>
									</c:forEach>
									</div>
								</div>

							</td>
						</tr>


						<tr>
							<td class="t">
								<b class="red">*</b> 手机或电话：
							</td>
							<td>
								<input class="text2" name="info.tel" value='${info.tel}'
									id="info.tel" />
								<span id="Phone_Tip"></span>
							</td>
						</tr>
						<tr>
							<td class="t">
								<b class="red">*</b> 个人或商家：
							</td>
							<td>



								<label>
									<input class="base" type="radio" value="false"
										name="info.personalFlag"
										<c:if test="${!info.personalFlag}">checked </c:if> />
									<span>我是商家</span>
								</label>
								&nbsp;&nbsp;&nbsp;&nbsp;
								<label>
									<input type="radio" name="info.personalFlag" value='true'
										<c:if test="${info.personalFlag}">checked </c:if> />
									<span>我是个人</span>
								</label>
							</td>
						</tr>
						<tr>
							<td class="t">
								<b class="red">*</b> 联系人：
							</td>
							<td>
								<input type="text" name="info.contact" id="info.contact"
									value='${info.contact}' class="text2" />
							</td>
						</tr>
						<tr>
							<td class="t">
								QQ或MSN：
							</td>
							<td>
								<input class="text2" type="text" value='${info.qq }'
									id="info.qq" name="info.qq" />
								<span id="IM_Tip"></span>
							</td>
						</tr>
						<tr>
							<td class="t">
							</td>
							<td>
								<input type="submit" id="fabu" class="fabu1" value="马上发布" />
							</td>
						</tr>
					</table>
				</form>
			</div>






			<div id="footer">
				&copy;
				<a href="http://about.58.com/v5/">帮助中心</a>
			</div>

		</div>

		<script type="text/javascript">
		String.prototype.replaceAll = function(s1, s2) {
			return this.replace(new RegExp(s1, "gm"), s2);
		}
		 
		
</script>
		<script type="text/javascript"
			src="<c:url value='/scripts/jquery-1.4.2.js'/>"></script>
		<script type="text/javascript"
			src="<c:url value="/ckeditor/ckeditor.js"/>"></script>
		<script type="text/javascript"
			src="<c:url value='/scripts/jquery.bgiframe-2.1.1.js'/>"></script>
		<script type="text/javascript"
			src="<c:url value="/ckeditor/adapters/jquery.js"/>"></script>
		<script type="text/javascript"
			src="<c:url value='/scripts/jquery.validate.js'/>"></script>

		<script type="text/javascript">
			 
			function FileProgress(file,fileListID,swfUploadInstance) {
				document.getElementById("selected_pic").innerHTML=file.name;		
			}
			
			
		var img_num = ${fn:length(infoImages)};
		 function uploadSpecValueSuccess(file, serverData){		        	
					try {					 						 
						var vals = serverData.split("__");
						document.getElementById("selected_pic").innerHTML='';
						var str ='<div id="img_'+vals[1]+'" class="imgbox"><div class="item_border"><div   class="item uploaded">'+
							'<img width="80" height="60" src="'+vals[0]+'" /></div><a href="javascript:void(0)" onclick="delImg(this,'+vals[1]+')" class="cancel delete" >删除'+
							'<input	type="hidden" name="infoImages['+img_num+'].id" value="'+vals[1]+'" /> '+
							'<input	type="hidden" name="infoImages['+img_num+'].source" value="'+vals[0]+'" />	</a></div> </div>';						 
						 $('#uploadimages').append(str);
						 img_num++;   
					} catch (ex) {						
						this.debug(ex);
					}  
				 
		    }
		</script>



		<script type="text/javascript"
			src="<c:url value="/swfupload/js/swfupload.js"/>"></script>
		<script type="text/javascript"
			src="<c:url value="/swfupload/js/swfupload.queue.js"/>"></script>
		<script type="text/javascript"
			src="<c:url value="/swfupload/js/fileprogress.js"/>"></script>
		<script type="text/javascript"
			src="<c:url value="/swfupload/js/handlers.js"/>"></script>

		<script type="text/javascript">
	
 
   
        

        
 
 		function startUpload(){  
			swfu.startUpload();			
        }
        
        
   function delImg(obj,imgId){
	if(!confirm('确定删除吗?')){
			return;
	}
	if(imgId!=0){
		var url = "infoImageDelete";
		var params = {
			"id" : imgId
		};

		$.getJSON(url, params, 
			function callback(data) 
			{
				var flag = data.successFlag;
				var returnString='';
					if(flag){
						returnString = '删除成功'; 
						$("#img_"+imgId).remove();
					}else{ 
						returnString = '删除失败'; 
					}
					alert(returnString);			
				
			}
		);
		
	} 
}

       
       var settings = {
            
            // Flash Settings
			flash_url : "<c:url value="/swfupload/js/swfupload.swf"/>",
            upload_url : "<c:url value="/swfUpload"/>",
			post_params : {
				"modelType" : "goodsSpec"
			},
			file_post_name : "file",
			
			http_success : [201, 202], 
			assume_success_timeout : 0,
			// File Upload Settings
			file_size_limit : "5MB", // MB			 
			file_types : "*.*",
			file_types_description : "All Files",
			file_upload_limit : "10",
			file_queue_limit : "0",

			// Event Handler Settings (all my handlers are in the Handler.js file)
			file_dialog_start_handler : fileDialogStart,
			file_queued_handler : fileQueued,
			file_queue_error_handler : fileQueueError,
			file_dialog_complete_handler : startUpload ,
			upload_start_handler : uploadStart,
			upload_progress_handler : uploadProgress,
			upload_error_handler : uploadError,
			upload_success_handler : uploadSpecValueSuccess,
			upload_complete_handler : uploadComplete,

			// Button Settings
			button_image_url : "<c:url value="/swfupload/images/XPButtonUploadText_61x22.png"/> ",
			button_placeholder_id : "spanButtonPlaceholder1",
			button_width : 61,
			button_height : 22,
			// Debug Settings
			auto_upload: true
			
        };

       
        
        var swfu = new SWFUpload(settings);
 


 

 

 

 
		
	
		var config = {
			toolbar:
			[
				[ 'Bold', 'Italic', 'Underline', 'StrikeThrough', '-',
							'Subscript', 'Superscript' ],
				[ 'OrderedList', 'UnorderedList', '-', 'Outdent', 'Indent',
							'Blockquote' ],
				[ 'JustifyLeft', 'JustifyCenter', 'JustifyRight',
							'JustifyFull' ],
				[ 'Link', 'Unlink', 'Anchor' ],
				[ 'Style', 'FontFormat', 'FontName', 'FontSize' ],
				[ 'Image',  'Table', 'Rule', 'Smiley','SpecialChar' ], [ 'TextColor', 'BGColor'  ,'Source' ]
			],                                          
			filebrowserImageUploadUrl : '<c:url value="/uploadFile?Type=Image"/>'
		};
		
		$('.jquery_ckeditor').ckeditor(config); 
		
			
			
 
	
	
	
	
	$(document).ready(function() {
		var validator = $("#info_form").validate( {
			errorElement : "div",
			errorClass : "x-vali-error",
			onfocusout : false,
			rules : {
				'info.title' : "required",
 				'info.money' : {
					required : true,
					number : true
				},
				'info.tel' : "required",
				'info.contact' : "required" 
			},
			messages : {
				'info.title' : '不能为空',
				'info.money' : {
					required : '不能为空',
					number : '请输入数字'
				},	
				'info.tel' : '不能为空',
				'info.contact' : '不能为空' 
			},
			// the errorPlacement has to take the table layout into account
			errorPlacement : function(error, element) {
				element.removeClass('x-vali-error');
				error.appendTo(element.parent());

			},
			// specifying a submitHandler prevents the default submit, good for the demo
			//submitHandler: function() {
			//	alert("submitted!");
			//},
			// set this class to error-labels to indicate valid fields
			success : function(div) {
				//label.html("&nbsp;").addClass("checked");
			//alert(div.is()+'\t'+);
			$(div).remove(); 
		}
		});
	});
	
	
	
	
	
</script>
	</body>
</html>